<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>吃热狗游戏</title>
    <style>
        *{padding: 0;margin: 0;}
        html,body{height: 100%;}
        #time h1{font-size: 20px;}
        
        .hotdog {width: 20px;height: 50px;}
        .guanjun {width: 40px;height: 70px;}

        #wsc{position: fixed;bottom:0px;left: 0px;}
        #wsc .wsc {width: 70px;height: 70px;}
        #wsc h1{font-size: 20px;margin-left: 70px;display: none;}

        #setting{width: 200px;height: 150px;border: black solid 2px;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;display: none;}
        #setting h2{text-align: center;margin: 10px auto;}
        #setting button{font-size: 22px;margin: 10px auto;display: block;}

        #score h1{font-size: 20px;position: fixed;right: 0;top: 0;}
    </style>
</head>
<body>
    <!-- 倒计时 -->
    <div id="time">
        <h1>
            剩余时间<span>5</span>秒
        </h1>
    </div>
    <!-- 图片 -->
    <!-- <img src="./img/guanjun.jpg" alt="" class="guanjun"> -->
    <!-- <img src="./img/hotdog.jpg" alt="" class="hotdog"> -->
    <div id="wsc">
        <h1>+1</h1>
        <img src="./img/wsc.jpg" alt="" class="wsc">
    </div>
        
    <!--重新游戏  -->
    <div id="setting">
        <h2 class="gameover">游戏结束</h2>
        <h2 class="result">0分</h2>
        <button class="restart">*重新开始*</button>
    </div>
    <!-- 得分 -->
    <div id="score">
        <h1>+0分</h1>
    </div>
</body>

<script>
    //全局变量
    var wscObj = document.querySelector('#wsc');
    var wsc2Obj = document.querySelector('#wsc .wsc');
    var wscX = 0;
    var wscY = (window.innerHeight||document.documentElement.clientHeight) - wsc2Obj.offsetHeight;
    var score = 0;
    var time = 5;

    function getRandom(max,min){
        return parseInt(Math.random()*(max-min+1)+min);
    }

    //随机掉东西-X轴
    var t1;
    function startFn(){
        t1 = setInterval(function(){
            var imgObj = document.createElement('img');
            var who = getRandom(9,0)
            // console.log(who)
            if(getRandom(9,0) ==5 || getRandom(9,0) == 6 || getRandom(9,0) == 7 || getRandom(9,0) == 8){
                imgObj.className = 'guanjun food';
                imgObj.src = './img/guanjun.jpg';
            }else{
                imgObj.className = 'hotdog food';
                imgObj.src = './img/hotdog.jpg';
            }
            imgObj.style.position = 'fixed';
            imgObj.style.top = 0 + 'px';
            var min = 0;
            var max = (window.innerWidth || document.documentElement.clientWidth) - imgObj.offsetWidth;
            imgObj.style.left = getRandom(max,min) + 'px';
            // console.log(imgObj.style.left);
            document.body.appendChild(imgObj);
        },1000)
    }
    var startTime = startFn(); 

    //随机掉东西-Y轴
    var t2 = setInterval(function(){
        var foods = document.querySelectorAll('.food')
        foods.forEach(function(item,index){
            var top = parseInt(item.style.top) + 2;
            var maxTop = (window.height || document.documentElement.clientHeight) - item.offsetHeight;
            if(top>maxTop){
                document.body.removeChild(item);
            }else{
                item.style.top = top +'px';
            }
            //吃食物
            var wsc2Obj = document.querySelector('#wsc .wsc');
            var foodX = parseInt(item.style.left);
            var foodY = parseInt(item.style.top) + parseInt(item.offsetHeight);
            // console.log(item.width);
            if(foodX>wscX && foodX<=(wscX + wsc2Obj.offsetWidth) && foodY>=wscY){
                if(item.width > 30){
                    score+=5;
                    document.querySelector('#wsc h1').innerHTML = '+5';
                }else{
                    score++;
                    document.querySelector('#wsc h1').innerHTML = '+1';
                }
                document.querySelector('#score h1').innerHTML = '+' + score + '分';
                document.body.removeChild(item);
                document.querySelector('#wsc h1').style.display = 'block';
                setTimeout(() => {
                    document.querySelector('#wsc h1').style.display = 'none'; 
                }, 500);
            }
        })
    })

    //移动wsc
    var wscObj = document.querySelector('#wsc');
    document.onmousemove = function(evt){
        var e = evt || window.event;
        var wscObj = document.querySelector('#wsc');
        var x = e.clientX - wscObj.offsetWidth/2;
        // wscObj.style.position = 'absolute';
        var min = 0;
        var max = (window.innerWidth || document.documentElement.innerWidth) - wscObj.offsetWidth + 20;
        // console.log(max);
        if(x<min){
            x = 0;
        }else if(x>=max){
            x = max;
        }
        wscObj.style.left = x + 'px';
        wscX = x;
    }

    //游戏时间
    var t3;
    function stopFn(){
        t3 = setInterval(function(){
            var setObj = document.querySelector('#setting');
            var time = document.querySelector('#time h1 span').innerHTML;
            time--;
            document.querySelector('#time h1 span').innerHTML = time;
            if(time == 0){
                clearInterval(t1);
                clearInterval(t3);
                var restartObj = document.querySelector('#setting');
                restartObj.style.display = 'block';
                document.querySelector('#setting .result').innerHTML = score + '分';
            }
        },1000)       
    }
    var stopTime = stopFn();

    var btnObj = document.querySelector('#setting button');
    btnObj.onclick = function(){
        document.querySelector('#setting').style.display = 'none';
        document.querySelector('#time h1 span').innerHTML = 5;
        score = 0;
        document.querySelector('#score h1').innerHTML = '+' + score + '分';
        startTime = startFn();
        stopTime = stopFn();
    }


</script>

</html>